第二章：選擇器（2） - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 4

0

Modern Web

CSS大全閱讀筆記系列第 4 篇

第二章：選擇器（2）

11th鐵人賽

2019-09-20 23:54:02

495 瀏覽

分享至

屬性選擇器：
a. 簡單屬性選擇器：
- 選擇擁有特定屬性的元素，不論屬性的數值。
- 寫法：（令第一個<a>顯示粗體）
（HTML）<a href="##" title="h1a">...</a><a href="##">...</a>
（CSS）a[href][title] {font-weight: bold;}
b. 精確屬性值選擇器：
- 限縮選擇條件，選擇特定屬性數值的元素。
- 與ID選擇器以id為條件的屬性選擇器並不完全相同（h1#home≠h1[id="home"]），在權重上會有差異。
- 寫法：（令連結到hppts://ithelp.ithome.com.tw網址的<a>顯示粗體）
（HTML）<a href="https://ithelp.ithome.com.tw/">...</a><a href="##">...</a>
（CSS）a[href][title] {font-weight: bold;}
c. 特殊屬性選擇器：不依據完整的設定值，而是依據部分設定值選擇元素。
- *[class|="en"]：|，選擇所有屬性值為en或en-開頭的元素，例<h1 class="en-header">......</h1>、<p class="en">......</p>。
- p[class~=urgent]：~，在空白分隔的設定值清單中比對符合urgent字串的元素，例<p class="urgent warning">......</p>，和p.urgent相同。
- span[class*="red"]：*，選擇所有具有class屬性且設定值包含red字串的元素，例<span class="red-robin">...</span>、<span class="red">...</span>、<span class="redline">...</span>、<span class="red hood">...</span>。
- span[class^="red"]：^，選擇所有具有class屬性且設定值字首為red字串的元素，例<span class="redline">...</span>。
- span[class$="ed"]：$，選擇所有具有class屬性且設定值字尾為ed字串的元素，例<span class="checked">...</span>。

第二章：選擇器（1）

第二章：選擇器（3）

系列文

CSS大全閱讀筆記共 30 篇

目錄

RSS系列文訂閱系列文

5 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙